<template>
  <div>
		<van-nav-bar  title="新增客户" left-arrow @click-left="$utils.back($route.path)" />
		<div class="register-form pd-24 mg-24 bg-white">
      <van-cell-group class="apply_main fs-30">
				<van-field
					class="fs-30"
					v-model="model.RealName.value"
					required
					clearable
					:label="model.RealName.label"
					placeholder="请输入姓名"
				/>
				<van-field
					class="fs-30"
					v-model="model.Tel.value"
					required
					clearable
					:label="model.Tel.label"
          maxlength="11"
					placeholder="请输入手机号码"
				/>
				<van-field
					class="fs-30"
          v-model="model.password.value"
          type="password"
          :label="model.password.label"
          placeholder="请设置登录密码"
          required
          clearable
        />
				<van-field
					class="fs-30"
					:value="model.InvitUserName.value"
					clearable
          readonly
					clickable
					right-icon="arrow"
					:label="model.InvitUserName.label"
					placeholder="请选择推荐人"
          @click="InvitUse = true"
				/>
        <van-field
					class="fs-30"
					:value="model.sex.value"
					clearable
          readonly
					clickable
					right-icon="arrow"
					:label="model.sex.label"
					placeholder="请选择性别"
          @click="sexbox = true"
				/>
        <van-field
					class="fs-30"
					:value="model.Source.value"
					clearable
          readonly
					clickable
					right-icon="arrow"
					:label="model.Source.label"
					placeholder="请选择会员来源"
          @click="Sourcebox = true"
				/>
				<van-field
					class="fs-30"
					readonly
					clickable
					right-icon="arrow"
					name="area"
					required
					:value="model.regionNames.value"
					label="地区"
					placeholder="点击选择地区"
					:rules="[{ required: true, message: ' ' }]"
					@click="showArea = true"
				/>
				<div class="project mr-24 pb-24">
					<div class="apply_title left-star">详细地址</div>
					<van-field v-model="model.contactAddress.value" type="textarea" class="pl-10 fs-30 mt-15 remark" placeholder="请输入详细地址" />
				</div>
        <van-field clearable label="会员标签">
          <template #input>
            <van-checkbox-group v-model="result" @change="resultbox">
              <van-checkbox class="mb-16" v-for="item in labelList" :key="item.ID" :name="item.LabelName">
              {{item.LabelName}}
              </van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>
        <van-field
           @click="actionSheetTap"
            v-model="affiliationName"
            readonly
            required
            clickable
            label="归属员工"
            placeholder="请选择归属员工"
          />
			</van-cell-group>
		</div>
		<div class="plr-40 ptb-16 bg-white fixed-bottom" >
      <van-button size="large" class="bg-primary color-white br-44" @click="submit">提交申请</van-button>
    </div>
    <van-popup v-model="InvitUse" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="InvitUse=false"
          @confirm="onChange"
        />
    </van-popup>
    <van-popup v-model="sexbox" position="bottom">
        <van-picker
          show-toolbar
          :columns="sexcolumns"
          @cancel="sexbox=false"
          @confirm="sexonChange"
        />
    </van-popup>
    <van-popup v-model="Sourcebox" position="bottom">
        <van-picker
          show-toolbar
          :columns="sourceArray1"
          @cancel="Sourcebox=false"
          @confirm="sourceonChange"
        />
    </van-popup>
    <van-popup v-model="affiliationbox" position="bottom">
        <van-picker
          show-toolbar
          :columns="itemList"
          @cancel="affiliationbox=false"
          @confirm="affiliationboxChange"
        />
    </van-popup>
		<van-popup v-model="showArea" position="bottom">
      <areaSelect :address-data="pageData" @pickArea="pickArea" />
    </van-popup>
	</div>
</template>
<script>
import { Toast } from 'vant'
import { upLoad } from 'api/upload'
import { SendSmsNoVerifyCode } from 'api/member'
import areaSelect from 'components/address/areaSelect'
import { ApplySupplierByUser, GetSupplierInfoByShopUserId } from 'api/purchase'
import { GetBusinessFunction } from 'api/businessSetting'
import { GetUserStore } from 'api/store'
import { GetUserPageFromStore, GetListNotPage,GetAllLabels,GetListByStore,RegisterUserFromStore} from 'api/member'
export default {
	components: {
    areaSelect,
  },
	data() {
    return {
      avar: [],
      logo: [],
      InvitUse:false,
      sexbox:false,
      Sourcebox:false,
      affiliationbox:false,
      columns:[],
      sexcolumns: ['男', '女'],
      sourceArray: [],
      sourceArray1: [],
      labelList:[],
      result:[],
      affiliationName:'',
      employeeUserId:'',
      model: {
        RealName: {
          label: '姓名',
          value: '',
          require: true,
          requireMessage: '请输入姓名'
        },
        Tel: {
          label: '手机号码',
          value: '',
          require: true,
          requireMessage: '请输入手机号码',
					pattern: /^1[3456789]\d{9}$/,
          patternMessage: '请输入正确的手机号'
        },
				password: {
          label: '登录密码',
          value: '',
          require: true,
          requireMessage: '请设置登录密码',
          minLength: 6
        },
        InvitUserName: {
          label: '推荐人',
          value: '',
          InvitUserId:'',
          require: false,
          requireMessage: '请选择推荐人',
        },
        sex: {
          label: '性别',
          value: '',
          sexNum: 0,
          require: false,
          requireMessage: '请选择性别',
        },
        Source: {
          label: '会员来源',
          value: '',
          SourceId: 0,
          require: false,
          requireMessage: '请选择会员来源',
        },
				regionNames: {
          label: '地区',
          value: '',
          require: true,
          requireMessage: '请选择地区',
        },
				contactAddress: {
          label: '详细地址',
          value: '',
          require: true,
          requireMessage: '请输入详细地址',
        },
				validType: 8,
				provinceName: '',
				provinceId: 0,
				cityName: '',
				cityId: 0,
				regionName: '',
				regionId: 0,
				streetName: '',
				streetId: '',
      },
      sortList: [],
      identify: {
        // 随机产生验证码的字符串
        identifyCodes: '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ',
        identifyCode: ''
      },
      codeDisabled: false,
      GetWriteoffRecordPageRequest: {
        PageIndex: 1,
        PageSize: 99,
      },
      memberList:[],
			showArea: false,
			pageData: {},
			showTips: false,
			isclose: false,
      affiliationList:[],
      itemList:[]
    }
  },
	created(){
    this.GetWriteoffRecordPage()
    this.GetListNotPage()
    this.GetAllLabels()
    this.GetListByStore()
	},
	methods: {
    GetWriteoffRecordPage() {
      GetUserPageFromStore(this.GetWriteoffRecordPageRequest).then(res => {
        if (res) {
          if (res.Data.Data.length && res.Data.Data.length > 0) {
            this.memberList = res.Data.Data;
            res.Data.Data.forEach(tem => {
              this.columns.push(tem.RealName+'-'+tem.CardNumber)
            })
          }
        }
      })
    },
    GetListNotPage(){
      GetListNotPage({
					type: 27
				}).then(res => {
        if (res.State) {
            this.sourceArray = res.Data;
            this.sourceArray1 = [];
            res.Data.forEach(tem => {
              this.sourceArray1.push(tem.Name)
            })
        }
      })
    },
    GetAllLabels(){
      GetAllLabels().then(res => {
        if (res.State) {
						this.labelList = res.Data;
					}
      })
    },
    GetListByStore(){
      let param = {
					pageIndex: 1,
					pageSize: 9999,
					isFirstMe: 1
				}
        GetListByStore(param).then(res => {
          if (res.State == 1 && res.Data.length > 0) {
						let list = res.Data;
						this.affiliationList = list;
            let itemList = [];
            list.forEach(e => {
              itemList.push(e.V_RealName)
            })
            this.itemList = itemList
						this.affiliationName = list[0].V_RealName;
						this.employeeUserId = list[0].UserId;
					}
      })
    },
    resultbox(){
      console.log(this.result)
    },
    actionSheetTap(){
      this.affiliationbox = true
    },
    onChange(value, index) {
      this.model.InvitUserName.value = this.memberList[index].RealName
      this.model.InvitUserName.InvitUserId = this.memberList[index].UserId
      this.InvitUse = false;

    },
    sexonChange(value, index) {
      this.model.sex.value = this.sexcolumns[index]
      this.model.sex.sexNum = +index + 1
      this.sexbox = false;
    },
    sourceonChange(value, index){
      this.model.Source.value = this.sourceArray[index].Name;
			this.model.Source.SourceId = this.sourceArray[index].ID;
      this.Sourcebox = false;
    },
    affiliationboxChange(value, index){
      this.affiliationName = this.affiliationList[0].V_RealName;
			this.employeeUserId = this.affiliationList[0].UserId;
      this.affiliationbox = false;
    },
    
    submit() {
      let self = this
      // 表单验证
      if (self.$utils.formValidate(self.model).valid) {
          let parms = {
            realName: this.model.RealName.value,
            tel: this.model.Tel.value,
            password: this.model.password.value,
            sex: this.model.sex.sexNum,
            sourceId: this.model.Source.SourceId,
            employeeUserId:this.employeeUserId,
            provinceId:this.model.provinceId,
            provinceName:this.model.provinceName,
            cityId:this.model.cityId,
            cityName:this.model.cityName,
            areaId:this.model.regionId,
            areaName:this.model.regionName,
            streetId:this.model.streetId,
            streetName:this.model.streetName,
            address:this.model.contactAddress.value
          }
          if(this.result.length>0){
            parms.labelStr=this.result.join(',')
          }
          if(this.model.InvitUserName.InvitUserId){
            parms.invitUserId=this.model.InvitUserName.InvitUserId
          }
          console.log(parms)
          RegisterUserFromStore(parms).then(res => {
						if (res.State == 1) {
							this.$toast("注册成功");
							setTimeout(() => {
                this.$router.replace({
                  path: '/customerList?quotation=1' 
                })
							}, 2000)
						} else {
              this.$toast(res.Msg)
						}
					})
      } else {
        this.$toast(self.$utils.formValidate(self.model).msg)
      }
    },
		
		// 确认选择省市区
		pickArea(areaObj) {
      console.log(123123123)
      console.log(areaObj)
      this.model.provinceName = areaObj.ProvinceName
      this.model.provinceId = areaObj.ProvinceId
      this.model.cityName = areaObj.CityName
      this.model.cityId = areaObj.CityId
      this.model.regionName = areaObj.AreaName
      this.model.regionId = areaObj.AreaId
      this.model.streetName = areaObj.StreetName
      this.model.streetId = areaObj.StreetId
      this.model.regionNames.value = (this.model.provinceName || '') + '-' + (this.model.cityName || '') + '-' + (this.model.regionName || '') + '-' + (this.model.streetName || '')
      this.showArea = false
    },
  },
}
</script>
<style lang="scss" scoped>
	.remark{
		background: #f7f7f7;
		padding-left: 32px !important;
	}	
	.project{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-bottom: 1px solid #ebedf0;
		margin-left: 10px;
	}
	.apply_title{
		margin: 20px 0 0 5px;
		font-size: 30px;
		position: relative;
	}
	.project:last-child{
		border-bottom: none;
	}
	[class*=van-hairline]::after {
  	border: none;
	}
	.project{
		.van-cell{
			padding-left: 0;
		}
	}
	.left-star{
		padding-left: 15px;
		&::before{
			content: "*";
			color: #FF0202;
			position: absolute;
			font-size: 28px;
			top: 5px;
			left: 0;
		}
	}
	.services{
		width: 60%;
		border-radius: 12px;
	}
	.unartificer{
		background: #fff;
		padding: 24px;
	}
	.disTitle {
		color: #c8c9cc;
	}
</style>
